lit-html

What is lit-html?

The lit-html npm package is a simple, modern, and efficient library for creating and managing HTML templates with JavaScript. It uses JavaScript template literals with embedded HTML markup to render dynamic content in web applications. The library is designed to be lightweight and fast, with a focus on minimizing the amount of work needed to update the DOM when the application state changes.

What are lit-html's main functionalities?

Dynamic Template Binding

lit-html allows you to bind data dynamically to your HTML templates using JavaScript expressions within template literals. The example code shows how you can insert a variable 'name' into a paragraph element.

`<p>Hello, ${name}!</p>`

Conditional Rendering

You can use JavaScript ternary operators to conditionally render parts of your template. This example demonstrates rendering a different paragraph element based on the truthiness of a 'condition' variable.

`${condition ? html`<p>True</p>` : html`<p>False</p>`}`

Repeating Templates

lit-html provides a straightforward way to render lists or repeat templates by using standard JavaScript array methods like 'map'. In this code, 'items' is an array that is being mapped to a list of 'li' elements.

`${items.map(item => html`<li>${item}</li>`)}`

Event Handling

Event handling in lit-html is done by prefixing the event name with an '@' symbol and assigning a handler function. The example shows a button element that calls the 'handleClick' function when clicked.

`<button @click=${handleClick}>Click me</button>`

Composability

lit-html templates can be composed together to build complex UIs. This example demonstrates how you can combine different template parts, like 'headerTemplate' and 'footerTemplate', to create a complete layout.

`${headerTemplate} ${footerTemplate}`

Other packages similar to lit-html

react

React is a popular library for building user interfaces. It also uses a component-based model and JSX for templating, which is similar to lit-html's use of template literals. However, React has a larger ecosystem and provides more features out of the box, such as state management and lifecycle methods.

vue

Vue is another popular framework that offers a reactive and composable data model. It uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component state. Vue's approach is more similar to traditional HTML and less JavaScript-centric compared to lit-html.

svelte

Svelte is a compiler-based framework that shifts much of the work to compile time, resulting in smaller runtime size and potentially better performance. Like lit-html, Svelte uses a templating syntax that is close to standard HTML but with additional features for reactivity and state management.

README

lit-html

Efficient, Expressive, Extensible HTML templates in JavaScript

Documentation

Full documentation is available at lit-html.polymer-project.org.

Docs source is in the docs folder. To build the site yourself, see the instructions in docs/README.md.

Overview

lit-html lets you write HTML templates in JavaScript with template literals.

lit-html templates are plain JavaScript and combine the familiarity of writing HTML with the power of JavaScript. lit-html takes care of efficiently rendering templates to DOM, including efficiently updating the DOM with new values.

import {html, render} from 'lit-html';

// This is a lit-html template function. It returns a lit-html template.
const helloTemplate = (name) => html`<div>Hello ${name}!</div>`;

// This renders <div>Hello Steve!</div> to the document body
render(helloTemplate('Steve'), document.body);

// This updates to <div>Hello Kevin!</div>, but only updates the ${name} part
render(helloTemplate('Kevin'), document.body);

lit-html provides two main exports:

• html: A JavaScript template tag used to produce a TemplateResult, which is a container for a template, and the values that should populate the template.
• render(): A function that renders a TemplateResult to a DOM container, such as an element or shadow root.

Installation

$ npm install lit-html

Forward compatibility with lit-html 2.0

lit-html 2.0 has a new directive authoring API that has been back-ported to lit-html 1.4 in order to ease upgrading.

The lit-html 2.0 directive API is available in new modules whose paths are the same in lit-html 1.4 and 2.0, allowing code to import and use the APIs against either version.

You can import the new APIs like so:

import {html} from 'lit-html';
import {directive, Directive, Part, PartInfo, PartType} from 'lit-html/directive.js';

Then implement a directive class and convert it to a directive function:

class MyDirective extends Directive {
  // ...
}
/** My directive docs **/
export const myDirective = directive(MyDirective);

Important note: The AsyncDirective base class is available, but lit-html 1.4 does not implement the disconnected and reconnected callbacks.

For more details on upgrading see the Update custom directive implementations guide.

Contributing

Please see CONTRIBUTING.md.